<!--
 * @Author: your name
 * @Date: 2022-03-13 17:38:04
 * @LastEditTime: 2022-03-13 18:26:47
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue3-ts-food-admin\src\views\orderManage\childrenViews\todaysOrder.vue
-->
<template>
  <div class="childContainer">
    <SalesData className="salesDataSection"></SalesData>
    <div class="salesFormSection">
      <el-form :model="form" label-width="120px" class="salesForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="下单时间">
              <el-time-picker
                v-model="form.orderTime"
                is-range
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单状态">
              <el-select v-model="form.status" placeholder="订单状态">
                <el-option
                  v-for="item in statusPptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="送货员">
              <el-select v-model="form.deliver" placeholder="送货员">
                <el-option
                  v-for="item in deliversData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否催单">
              <el-select v-model="form.isHurry" placeholder="是否催单">
                <el-option label="是" value="1"> </el-option>
                <el-option label="否" value="0"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配送方式">
              <el-select v-model="form.deliveMethod" placeholder="配送方式">
                <el-option label="外卖" value="1"> </el-option>
                <el-option label="到店自取" value="2"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="来源">
              <el-select v-model="form.paySource" placeholder="来源">
                <el-option label="微信小程序" value="1"> </el-option>
                <el-option label="支付宝小程序" value="2"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="支付方式">
              <el-select v-model="form.payMethod" placeholder="支付方式">
                <el-option label="微信" value="1"> </el-option>
                <el-option label="支付宝" value="2"> </el-option>
                <el-option label="云闪付" value="3"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="支付状态">
              <el-select v-model="form.payStatus" placeholder="支付状态">
                <el-option label="成功" value="1"> </el-option>
                <el-option label="待支付" value="2"> </el-option>
                <el-option label="错误" value="3"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="queryArea">
      <div class="queryAreaLeft">
        <input
          type="text"
          placeholder="客户名、客户手机、订单号、收货地址"
          v-model="form.keyword"
          @input="handleKwdInput"
        />
        <div class="queryBtn">
          <el-icon color="#fff" size="30"><elicon-search /></el-icon>
        </div>
      </div>
    </div>
    <!-- 这里的原型设计太奇怪力 -->
    <div class="salesListSection">
      <div class="salesListTitle">
        <div class="listTitleLeft">订单号</div>
        <div class="listTitleRight">
          <span class="timeBefore">2小时前</span>
          <span class="listRightDetail">详细</span>
        </div>
      </div>
      <div class="salesListTable">
        <el-table
          :data="goodsData"
          style="width: 100%"
          :rowStyle="{ height: '60px' }"
        >
          <el-table-column prop="name" label="商品名称" />
          <el-table-column prop="id" label="商品编号" />
          <el-table-column prop="price" label="价格" />
          <el-table-column prop="count" label="数量" />
        </el-table>
        <div class="orderCountInfo">
          <span
            >共<span style="font-weight: 600; color: #333; padding: 0 4px">{{
              goodsData.length
            }}</span
            >种，
            <span style="font-weight: 600; color: #333; padding: 0 4px">{{
              totalCounts
            }}</span
            >个商品,总计<span
              style="font-weight: 600; color: red; padding: 0 4px"
              >¥{{ totalSales }}元</span
            ></span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import useDevelierList from "@/hooks/useDeliverList";
import useOrderGoodsDemo from "@/hooks/useOrderGoodsDemo";
import SalesData from "@/components/salesData/salesData.vue";
export default defineComponent({
  setup() {
    const form = reactive({
      orderTime: [],
      status: "",
      keyWord: "",
    });
    const statusPptions = ref([
      {
        value: 1,
        label: "正常",
      },
      {
        value: 2,
        label: "有退货",
      },
      {
        value: 2,
        label: "已取消",
      },
    ]);

    const handleKwdInput = (e: Event) => {
      if (e.target) {
        form.keyWord = (<HTMLInputElement>e.target).value;
      }
    };

    const { deliversData, loading: deliverLoading } = useDevelierList();

    const { goodsData } = useOrderGoodsDemo();

    return { form, statusPptions, deliversData, handleKwdInput, goodsData };
  },
  computed: {
    totalCounts() {
      let result = 0;

      if (this.goodsData.length > 0) {
        for (let i = 0; i < this.goodsData.length; i++) {
          const item = this.goodsData[i];
          result += item.count;
        }
      }
      return result;
    },
    totalSales() {
      let result = 0;
      if (this.goodsData.length > 0) {
        for (let i = 0; i < this.goodsData.length; i++) {
          const item = this.goodsData[i];
          result += item.count * item.price;
        }
      }
      return result;
    },
  },
  components: {
    SalesData: SalesData,
  },
});
</script>

<style lang="less" scoped>
.childContainer {
  width: 100%;
  .salesDataSection {
    margin-bottom: 40px;
  }
  .salesFormSection {
    border: 1px solid #ddd;
    padding: 10px 16px;
    margin-bottom: 22px;
    .salesForm {
      height: auto;
    }
  }
  .salesListSection {
    border: 1px solid #ddd;

    margin-bottom: 22px;
    .salesListTitle {
      height: 60px;
      display: flex;
      border-bottom: 1px solid #ddd;
      padding: 10px;
      justify-content: space-between;
      .listTitleLeft {
        height: 60px;
        display: flex;
        align-items: center;
        color: #333;
      }
      .listTitleRight {
        height: 60px;
        display: flex;
        align-items: center;
        .timeBefore {
          color: #999;
          margin-right: 20px;
        }
        .listRightDetail {
          cursor: pointer;
          color: #3434fd;
        }
      }
    }
    .salesListTable {
      padding-bottom: 10px;
    }
    .orderCountInfo {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
  .queryArea {
    margin-bottom: 22px;
    display: flex;
    height: 50px;
    justify-content: space-between;
    .queryAreaLeft {
      display: flex;
      width: 370px;
      height: 50px;

      input {
        width: 320px;
        border: 1px solid #eee;
        outline: none;
        line-height: 50px;
        padding-left: 10px;
        color: #aaa;
        &:-webkit-input-placeholder {
          color: #ddd;
        }
      }
      .queryBtn {
        width: 70px;
        height: 50px;
        background-color: #3758ff;

        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
    }
  }
}
</style>
